<template>
    <div class="information">
        <group title="您已选择套餐">
            <cell>
                <span slot="title" class="information-title">{{packages_json.productname}}</span>
                <div>
                    <p  class="information-money">￥{{packages_json.productamount}}</p>
                    <p  class="information-gift">赠:{{packages_json.paygiftmoney}} 狗币</p>
                </div>
            </cell>
        </group>
        <group class="information__required" title="请填写联系人" label-width="1.50rem" label-margin-right=".5rem" label-align="left">
            <x-input v-model="name" novalidate :icon-type="iconType.name" required ref="name" placeholder="姓名" is-type="china-name" @on-blur="handleNameValid">
                <span slot="label" class="information-title information-common">联系人</span>
            </x-input>
            <popup-picker :data="[['男', '女']]" v-model="gender" value-text-align="left">
                <span slot="title" class="information-title information-common">性别</span>
            </popup-picker>
            <x-input v-model="phone" novalidate  :icon-type="iconType.phone" required ref="mobile" placeholder="请填写手机号" is-type="china-mobile" @on-blur="handleMobileValid">
                <span slot="label" class="information-title information-common">电话</span>
            </x-input>
            <x-input v-model="wechat"  ref="wechat" placeholder="请填写微信号">
                <span slot="label" class="information-title information-common">微信</span>
            </x-input>
        </group>

        <group class="information__coupon" label-width="1.50rem" label-margin-right=".5rem" label-align="left">
            <popup-picker :data="couponList" v-model="coupon" value-text-align="right" @on-change="handleCouponChange">
                <span slot="title" class="information-title information-common">优惠券</span>
            </popup-picker>
            <cell class="coupon_vux-label">
                <div slot="title" style="width: 100%;font-size: .28rem;color:#000;">订单：<em style="color: #222">￥{{requiredMoney}}元</em>&nbsp;&nbsp; 优惠：<em style="color: #222">{{couponMoney}}元</em></div>
                <div>
                    <span style="font-size: .28rem;color:#000">应付: <em style="color: #ff721f">{{account}}元</em></span>
                </div>
            </cell>
        </group>

        <div class="information-tip">
            <div class="information-tip__box">
                限自己购买自己使用，不能代他人购买，每人每活动限购1张，不能重复购买。你可以通过分享给好友邀请好友参加。用户必须提供正确的资料并确保自身条件符合活动要求，否则可能会被主办方拒绝进场
            </div>
            <div class="information-floattip">温馨提示</div>
        </div>

        <div class="information-button">
            <flexbox :gutter="0">
                <flexbox-item><button class="signup_button-cancel" @click="handleCloseRegister">取消</button></flexbox-item>
                <flexbox-item><button class="signup_button-next" @click="handleNextStep">下一步</button></flexbox-item>
            </flexbox>
        </div>



    </div>
</template>

<script>
import { Cell, Group, XInput, PopupPicker,XButton, Flexbox, FlexboxItem } from 'vux'
import { mapState, mapMutations } from 'vuex'
import axios from 'axios'
import wx from 'weixin-js-sdk'

export default {
    name: "RestisterInformation",
    components: {
        Group,
        Cell,
        XInput,
        PopupPicker,
        XButton,
        Flexbox,
        FlexboxItem
    },
    data () {
        return {
            name: '',
            gender: ['男'],
            phone: '',
            wechat: '',
            requiredMoney: this.packages_json.productamount,
            couponList: [['不使用优惠券','优惠券 -1','优惠券 -2','优惠券 -3']],
            coupon:['不使用优惠券'],
            couponMoney: 0,
            nextStepKey: false,
            iconType: {
                name: '',
                phone: ''
            }
        }
    },
    props: {
        packages_json: Object,
        actid: Number
    },
    computed: {
        account () {
            return this.requiredMoney - this.couponMoney
        }
    },
    created () {
        axios.get('/api/common/getWechatScript')
                .then((response)=>{
                    // console.log(response)
                    let data = response.data
                    wx.config({
                        debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
                        appId: data.appId, // 必填，公众号的唯一标识
                        timestamp: data.timestamp, // 必填，生成签名的时间戳
                        nonceStr: data.nonceStr, // 必填，生成签名的随机串
                        signature: data.signature,// 必填，签名
                        jsApiList: [
                            'chooseWXPay'
                        ] // 必填，需要使用的JS接口列表
                    })
                    
                })
    },
    methods: {
        ...mapMutations([
            'register_alert_show'
        ]),
        handleCouponChange (val) {
            const data = val[0]
            if(data === '不使用优惠券') {
                this.couponMoney = 0
            }else {
                let arr = data.split('-')
                this.couponMoney = arr[1]
            }
            
        },
        handleCloseRegister (){
            this.$router.go(-1)
        },
        handleNextStep () {
            const user = this.common.getUserInfo()
            if( !this.$refs.mobile.valid ) {
                this.iconType.phone = 'error'
            }
            if( !this.$refs.name.valid ) {
                this.iconType.name = 'error'
            }
            if(this.nextStepKey === true) {
                //这里验证成功 可以执行一系列的逻辑
                axios.post(
                '/api/Wechatpay/wePay',
                {
                    user_id: user.userid,
                    product_id: this.packages_json.productid,
                    activity_id: this.actid,
                    pay_rmb: this.packages_json.productamount,
                    productname: this.packages_json.productname,
                    realname: this.name,
                    phone: this.phone,
                    sex: this.gender,
                    wechatid: this.wechat
                })
                .then((response)=>{
                    console.log(response)
                    this.wxpay(response.data)
                })

            }
            
            
        },
        handleMobileValid (value, event) {
            if(this.$refs.mobile.valid === true) {
                this.wechat = this.phone
                this.iconType.phone = 'success'
                if(this.$refs.name.valid === true) {
                    this.nextStepKey = true
                }
            }
        },
        handleNameValid (value) {
            if(this.$refs.name.valid === true) {
                this.iconType.name = 'success'
                if(this.$refs.mobile.valid === true) {
                    this.nextStepKey = true
                }
            }
            
        },
        wxpay (data) {
            // 这里获取到PHP生成签名参数包，注意是JSON格式
            // 
            let  options = data;
            let _this = this
            // 支付成功后的操作
            options.success = function (res) {

                axios.post('/api/Wechatpay/wePaySuccess',{
                    orderid: options.orderid
                }).then((response)=>{
                    _this.register_alert_show()
                })

            };
            
            //  取消支付的操作
            options.cancel = function () {

                alert('取消支付')
            };
            
            // 支付失败的处理 
            options.fail = function () {
                
            };
            
            // 传入参数，发起JSAPI支付
            wx.chooseWXPay(options);
        }
    }

}
</script>

<style lang="stylus" scoped>
.information__required >>> .weui-cell__hd
    width: 1.5rem
.information__required >>> .weui-input
    font-size: .26rem
.information__required >>> .vux-popup-picker-value
    font-size: .28rem
.information__coupon >>> .vux-popup-picker-value
    font-size: .28rem
    margin-right: .26rem       
.information-button >>> .vux-flexbox-item
    height: 100%
.information__coupon >>> .weui-cell  
    &:before
        left: 0
        border-top: 1px dotted #ddd
.coupon_vux-label >>> .vux-label
    width: 100%!important
.information
    .information-title
        font-size: .28rem
    .information-money
        color: #ff721f
        font-size: .19rem
    .information-gift
        color: #999
        font-size: .19rem
    .information-tip
        box-sizeing: border-box
        padding: .2rem
        margin-top: .2rem
        position: relative
        margin-bottom: .2rem
        .information-tip__box
            box-sizeing: border-box
            border: 1px solid #ccc
            padding: .40rem .20rem .20rem
            font-size: .24rem
            color: #999
            line-height: .34rem
        .information-floattip
            position: absolute
            top: 0
            background-color: #fbf9fe
            font-size: .40rem
            left: 2.75rem
            z-index: 2
            padding: 0 .3rem
    .information-button
        padding: 0!important
        display: flex
        height: 1.19rem
        border-top: 1px solid #ebebeb
        font-size: .42rem
        .signup_button-cancel
            height: 100%
            width: 100%
            background-color: #fff
        .signup_button-next
            height: 100%
            width: 100%
            background-color: #ff721f
            color: #fff
    .information__coupon
        position:relative
        .weui-cell
            border-top: 0!important
        &:before
            position: absolute
            content: ''
            width: .2rem
            height: .2rem
            background-color: #ebf0f2
            z-index: 2
            border-radius: 50%
            bottom: 44%
            left: -.1rem
        &:after
            position: absolute
            content: ''
            width: .2rem
            height: .2rem
            background-color: #ebf0f2
            z-index: 2
            border-radius: 50%
            bottom: 44%
            right: -.1rem
        
// @media screen and (max-width: 320px)
//     .information-button
//         padding: 5px 3px!important


</style>